From: Florian Müllner <fmuellner@gnome.org>
Date: Sun, 10 Dec 2023 22:59:04 +0000 (+0100)
Subject: extensions-app: Make error/update icon interactive
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~281^2~2^2~228
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=ed3394a95390e7791586c00b3b39c6f4ac2d3d9e;p=gnome-shell.git

extensions-app: Make error/update icon interactive

Both icons are not immediately obvious, and the context provided
by the tooltip can be hard to discover.

Address this by making the icons interactive, and provide further
information in a popover.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3051>
---

diff --git a/subprojects/extensions-app/data/css/style.css b/subprojects/extensions-app/data/css/style.css
index dac76335b..f9fafa717 100644
--- a/subprojects/extensions-app/data/css/style.css
+++ b/subprojects/extensions-app/data/css/style.css
@@ -16,6 +16,3 @@ row.extension box.information,
 row.extension box.status {
   border-spacing: 3px;
 }
-
-image.error { color: @error_color; }
-image.warning { color: @warning_color; }
diff --git a/subprojects/extensions-app/data/ui/extension-row.ui b/subprojects/extensions-app/data/ui/extension-row.ui
index 37acb68d3..efcb852a3 100644
--- a/subprojects/extensions-app/data/ui/extension-row.ui
+++ b/subprojects/extensions-app/data/ui/extension-row.ui
@@ -46,23 +46,68 @@
                           <class name="status"/>
                         </style>
                         <child>
-                          <object class="GtkImage" id="errorIcon">
+                          <object class="GtkMenuButton" id="errorButton">
                             <property name="visible">false</property>
+                            <property name="valign">center</property>
+                            <property name="has-frame">false</property>
                             <property name="icon-name">dialog-error-symbolic</property>
                             <property name="tooltip-text" translatable="yes">The extension had an error</property>
-                            <style>
-                              <class name="error"/>
-                            </style>
+                            <accessibility>
+                              <property name="label" translatable="yes">Error Details</property>
+                            </accessibility>
+                            <property name="popover">
+                              <object class="GtkPopover" id="errorPopover">
+                                <property name="child">
+                                  <object class="AdwClamp">
+                                    <property name="maximum-size">300</property>
+                                    <property name="tightening-threshold">300</property>
+                                    <property name="child">
+                                      <object class="GtkLabel" id="errorLabel">
+                                        <!-- Hack to make the screen reader read the label -->
+                                        <property name="selectable"
+                                                  bind-source="errorPopover"
+                                                  bind-property="visible"
+                                                  bind-flags="invert-boolean|sync-create"/>
+                                        <property name="wrap">true</property>
+                                      </object>
+                                    </property>
+                                  </object>
+                                </property>
+                              </object>
+                            </property>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkImage" id="updatesIcon">
+                          <object class="GtkMenuButton" id="updatesButton">
                             <property name="visible">false</property>
+                            <property name="valign">center</property>
+                            <property name="has-frame">false</property>
                             <property name="icon-name">software-update-available-symbolic</property>
                             <property name="tooltip-text" translatable="yes">The extension can be updated</property>
-                            <style>
-                              <class name="warning"/>
-                            </style>
+                            <accessibility>
+                              <property name="label" translatable="yes">Updates Details</property>
+                            </accessibility>
+                            <property name="popover">
+                              <object class="GtkPopover" id="updatesPopover">
+                                <property name="child">
+                                  <object class="AdwClamp">
+                                    <property name="maximum-size">200</property>
+                                    <property name="tightening-threshold">200</property>
+                                    <property name="child">
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">A new version of this extension is ready and will be loaded on next login.</property>
+                                        <!-- Hack to make the screen reader read the label -->
+                                        <property name="selectable"
+                                                  bind-source="updatesPopover"
+                                                  bind-property="visible"
+                                                  bind-flags="invert-boolean|sync-create"/>
+                                        <property name="wrap">true</property>
+                                      </object>
+                                    </property>
+                                  </object>
+                                </property>
+                              </object>
+                            </property>
                           </object>
                         </child>
                       </object>
@@ -78,18 +123,6 @@
                     </style>
                   </object>
                 </child>
-                <child>
-                  <object class="GtkLabel" id="errorLabel">
-                    <property name="visible">false</property>
-                    <property name="selectable">true</property>
-                    <property name="wrap">True</property>
-                    <property name="xalign">0</property>
-                    <style>
-                      <class name="caption"/>
-                      <class name="error"/>
-                    </style>
-                  </object>
-                </child>
               </object>
             </child>
             <child>
diff --git a/subprojects/extensions-app/js/main.js b/subprojects/extensions-app/js/main.js
index 77cac9122..d656e201a 100644
--- a/subprojects/extensions-app/js/main.js
+++ b/subprojects/extensions-app/js/main.js
@@ -361,8 +361,8 @@ var ExtensionRow = GObject.registerClass({
         'descriptionLabel',
         'versionLabel',
         'errorLabel',
-        'errorIcon',
-        'updatesIcon',
+        'errorButton',
+        'updatesButton',
         'switch',
         'actionsBox',
     ],
@@ -503,13 +503,9 @@ var ExtensionRow = GObject.registerClass({
         if (!action.enabled)
             this._switch.active = state;
 
-        this._updatesIcon.visible = this.hasUpdate;
-        this._errorIcon.visible = this.hasError;
-
-        this._descriptionLabel.visible = !this.hasError;
-
+        this._updatesButton.visible = this.hasUpdate;
+        this._errorButton.visible = this.hasError;
         this._errorLabel.label = this.error;
-        this._errorLabel.visible = this.error !== '';
 
         this._versionLabel.label = this.version.toString();
         this._versionLabel.visible = this.version !== '';